<template>
	<view class="bigview">
		<view class="content">
			<map style="width: 100%; height: 900rpx" :layer-style='5' :style="{height:mapheight}" :show-location='true'
				:latitude="latitude" :longitude="longitude" :markers="marker" :scale="scale" @markertap="markertap"
				@callouttap='callouttap'>
			</map>
		</view>
		<view class="downview">
			<view class="title">当前车辆
				<view class="secondtitle">{{message.licensePlateNumber}}</view>
			</view>
			<view class="line"></view>
			<view class="goodstitle">当前位置<text class="green">您已进入接单范围</text>
				<view class="goodscontent">{{message.position}}</view>
			</view>
			<view class="tag-view">
				<button class="tagtwo" type="primary" @click="order()">确认抢单</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				latitude: 37.781, //纬度
				longitude:112.558, //经度
				scale: 13, //缩放级别
				bottomData: false,
				marker: [{
						id: 0,
						latitude: 37.781, //纬度
						longitude: 112.558, //经度
						iconPath: '../../../../static/定位-面.png', //显示的图标        
						rotate: 0, // 旋转度数
						width: 30, //宽
						height: 30, //高
						   title:'我在这里',//标注点名
						alpha: 0.5, //透明度
						callout: { //自定义标记点上方的气泡窗口 点击有效  
							content: '我的位置', //文本
							color: '#ffffff', //文字颜色
							fontSize: 14, //文本大小
							borderRadius: 15, //边框圆角
							borderWidth: '10',
							bgColor: '#e51860', //背景颜色
							display: 'ALWAYS', //常显
						}
						}
					
				],
				lat:37.781,
				lng:112.558,
				message: {
					carId: "1",
					licensePlateNumber:"",
					position: "山西省太原市小店区龙兴街万立大厦",
					userId:"user101"
				},
				orderVo:{
					sourceId:'',
					licensePlateNumber:'',
					driverId:"user101",
					nameOfGood:''
				},
				car:[]
			}
		},
		onLoad(option) {
			this.getCar()
			this.getCarOne()
			this.orderVo.sourceId=option.sourceId
			this.orderVo.nameOfGood=option.goodsName
		},
		computed: {
			mapheight() {
				let data = ''
				if (this.bottomData) {
					if (this.upTop) {
						data = '50px'
					} else {
						data = '200px'
					}
				} else {
					data = '70vh'
				}
				return data
			},
			coverbottom() {
				let data = ''
				if (this.bottomData) {
					data = '20rpx'
				} else {
					data = '100rpx'
				}
				return data
			}
		},
		methods: {
			async order() {
				
				const result = await uni.$http.get("192.168.9.30:8080/waybill/pDCarDriver/" + this.message.licensePlateNumber + "/" + this.message.userId)
				const {
					code,
					msg
				} = result.data
				if (code == 0) {
						const result1 = await uni.$http.post("192.168.9.30:8080/waybill/order", this.message)
						console.log(result1)
						const {
							code,
							msg
						} = result1.data
						if (code == 0) {
							uni.$showSucc(msg)
							setTimeout(() => {
								uni.switchTab({
									url: "/pages/found-goods/found-goods"
								})
							}, 1000)
						} else if (code == 1) {
							uni.$showErr(msg)
							setTimeout(() => {
								uni.switchTab({
									url: "/pages/found-goods/found-goods"
								})
							}, 1000)
						}
				} else if (code == 1) {
					uni.$showErr(msg)
					setTimeout(() => {
						uni.switchTab({
							url: "/pages/found-goods/found-goods"
						})
					}, 1000)
				}
				// uni.$showMsg("您有正在运输中的运单，无法抢单")
			},
			async getCar(){
				const result2 = await uni.$http.get("192.168.9.30:8080/waybill/driverCar/user/"+this.message.userId)
				const {
					code,
					msg,
					data1
				} = result2.data
				this.car=data1
			},
			async getCarOne(){
				const result2 = await uni.$http.get("192.168.9.30:8080/waybill/driverCar/selectOne/"+this.message.userId)
				console.log(result2)
				const {
					code,
					msg,
					data1
				} = result2.data
				
				this.message.licensePlateNumber=data1[0].licensePlateNumber
				this.orderVo.licensePlateNumber=data1[0].licensePlateNumber;
			}
		}
	}
</script>

<style>
	.tagtwo {
		margin-top: 60rpx;
		margin-left: 50rpx;
		display: inline-block;
		width: 650rpx;
		height: 100rpx;
		border-radius: 30px;
	}

	.bigview {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
	}

	.upview {
		display: flex;
		flex-flow: column nowrap;
		justify-content: flex-start;
		align-content: space-evenly;
		width: 100%;
		height: 466px;
		overflow-y: scroll;
	}

	.downview {
		position: absolute;
		width: 100%;
		height: 240px;
		background-color: #fff;
		bottom: 0rpx;
	}

	.line {
		margin: 0 auto;
		width: 94%;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		border-bottom: 1rpx #f1f2f4 solid;
	}

	.title {
		margin-top: 30rpx;
		margin-left: 30rpx;
		font-size: 30rpx;
		color: #707070;
	}

	.secondtitle {
		margin-top: 20rpx;
		font-size: 36rpx;
		color: #000;
		font-weight: bold;
	}

	.goodstitle {
		margin-left: 30rpx;
		font-size: 30rpx;
		color: #707070;
	}

	.goodscontent {
		margin-top: 10rpx;
		color: #000;
		font-size: 32rpx;
	}

	.green {
		margin-left: 47%;
		color: #27D189;
	}
</style>